<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>玻璃宝-车型选择</title>
	<link rel="stylesheet" type="text/css" href="/rs/css/index.css">
	<script src="../js/util/jquery-1.7.2.min.js"></script>
	<script src="../js/util/md5.js"></script>
	<script src="../js/util/sha1.js"></script>
	<script type="text/javascript">
		
		function volidate(){
			if($("#name").val()==""){
				alert("姓名不能为空!");
				return false;
			}
			else if($("#phone").val()==""){
				alert("手机号不能为空!");
				return false;
			}
			else if($("#license").val()==""){
				alert("车牌号不能为空!");
				return false;
			}else{
				pay();
				
			}
			
		}
		function showNotice(){
			$("#notice").show();
			$("#index").hide();
		}
		function back(){
			$("#index").show();
			$("#notice").hide();
		}
		 function getTimeStamp()
	     {
	         var timestamp=new Date().getTime();
	         var timestampstring = timestamp.toString();//一定要转换字符串
	         return timestampstring;
	     }
		 function getSign(appid,timeStamp,nonceStr,prepay_id,signType)
	     {
	         //第一步，对所有需要传入的参数加上appkey作一次key＝value字典序的排序
	        
	         var keyvaluestring = "appId="+appid+"&nonceStr="+nonceStr+"&package="+prepay_id+"&signType="+signType+"&timeStamp="+timeStamp+"&key=zhejianghechengqichejituanyouxia";
	         
	         var sign = CryptoJS.MD5(keyvaluestring).toString();
	        
	         return sign;
	     }
		
		function pay(){
			var openId=$("#openId").val();
			var price=$("#price").val();
			var body = "bolibao";
			
			$.post('http://blb.zjhc.net.cn/weixin/getPrepayId',
					{
						openId : openId,
						body : body,
						price : price
					},
					function(data){
						
						var code = data.code;
						
						var msg = data.msg;
						var prepay_id = data.prepay_id;
						var appId = data.appid;
						var nonce_str = data.nonce_str;
						var paySign = data.paySign;
						var timeStamp = data.timeStamp;
						if(code != "200"){
							alert("支付失败！");
						}else{
							if (typeof WeixinJSBridge == "undefined"){
								   if( document.addEventListener ){
								       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								   }else if (document.attachEvent){
								       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
								       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								   }
								}else{
									
									WeixinJSBridge.invoke(
										       'getBrandWCPayRequest', {
										           "appId" : appId,     //公众号名称，由商户传入     
										           "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数     
										           "nonceStr" : nonce_str, //随机串     
										           "package" : prepay_id,     
										           "signType" : "MD5",         //微信签名方式:     
										           "paySign" : paySign //微信签名 
										       },
										       function(res){     
										    	   //alert(res.err_msg);
										           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
										        	   $("#form").submit();
										           }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
										       }
										   ); 
								}
						}
					} 
					,"json");
		}
	</script>
</head>
<body>
	<div id="wrap" class="step-1">
		<!-- banner -->
		<div id="banner">
			<img src="/rs/image/banner.jpg" alt="" width="100%">
		</div>
		<!-- 内容区域 -->
		<div class="title">
			<div class="detail">
				玻璃宝
			</div>
			<p><a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx43fdd59a150361cc&redirect_uri=http%3a%2f%2fblb.zjhc.net.cn%2fweixin%2findex&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect">产品详情>></a></p>
		</div>
		<div class="content">
			<p class="text">请选择您的爱车品牌和车型</p>
			<form action="">
				<ul>
					<li>
						<label>品牌</label>
						<select onchange="getBrandSub($(this).val());" id="brand" class="btn-select" style="border: 1px #BD9042 solid">
						</select>
					</li>
					<li>
						<label>车系</label>
						<select id="brand-sub" class="btn-select" onchange="getBrandPrice($(this));" style="border: 1px #BD9042 solid">
						</select>
					</li>
				</ul>
			</form>
			<div class="prize">
				<ul>
					<li class="li-text">商品单价:</li>
					<li id="type1" class="num">200<span>RMB</span></li>
					<li id="type2" class="num">400<span>RMB</span></li>
					<li id="type3" class="num">1000<span>RMB</span></li>
				</ul>
				<p>(注：商品单价按照您的爱车品牌和车型自动生成。价格如下车价15万元以下为200元/次，车价15万-30万为400元/次，车价30-40万为1000元/次。保修时间为3年。)</p>
			</div>
		</div>
		<div class="button" onclick="stepNext(1);"><a href="###"><img src="/rs/image/next.png" alt="" width="100%"></a></div>
	</div>
	
	
	<div id="page" class="step-2" style="display: none;">
		<div class="pay_header">请输入您的个人信息</div>
		<form action="/customer/saveCustomer" id="form" method="post">
			<input type="hidden" id="openId" name="customer.recommended" value="${openId}">
			<input type="hidden" id="type" name="customer.type" value="1">
			<input type="hidden" id="price" name="customer.price" value="1">
			<input type="hidden" id="cbrand" name="customer.brand" value="">
			<input type="hidden" id="iscompensation" name="customer.isCompensation" value="0">
			<div id="form_panel">
				<dl class="data_panel">
					<dd>
						<span class="label">姓 名</span>
						<input class="input_text" name="customer.name" type="text" id="name" />
					</dd>
					<dd>
						<span class="label">手 机</span>
						<input class="input_text" name="customer.phone" type="text" id="phone" />
					</dd>
					<dd>
						<span class="label">车 牌</span>
						<input class="input_text" name="customer.license" type="text" id="license" />
					</dd>
					<dt>
						<span id="check_box" class="check_box checked_box"><input checked="checked" type="checkbox" value="1" style="display: none;" />同意服务条款</span> <a href="javascript:void(0)">查看服务条款</a>
					</dt>
				</dl>
			</div>
			<!-- 
			<input type="submit" value="提交测试">
			 -->
		</form>
		<div class="bg_logo"></div>
		<div class="bt_input"  onclick="volidate();">立即支付</div>
	</div>
	
	<script type="text/javascript">
		var brandsJson = ${brandsJson}
		
		$(function(){
			$("#check_box").on('click' , function(){
				if($(this).hasClass('checked_box')){
					$(this).removeClass('checked_box');
					$(this).find('input[type="checkbox"]').attr('checked' , false);
				}else{
					$(this).addClass('checked_box');
					$(this).find('input[type="checkbox"]').attr('checked' , true);
				}
			});
		});
		
		
		
		function selectType(type){
			if(type==1){
				$("#type1").addClass("selected");
				$("#type2").removeClass("selected");
				$("#type3").removeClass("selected");
				$("#type").val(1);
				$("#price").val(2);
			}else if(type==2){
				$("#type2").addClass("selected");
				$("#type1").removeClass("selected");
				$("#type3").removeClass("selected");
				$("#type").val(2);
				$("#price").val(4);
			}else if(type==3){
				$("#type3").addClass("selected");
				$("#type1").removeClass("selected");
				$("#type2").removeClass("selected");
				$("#type").val(3);
				$("#price").val(10);
			}
		}
		
		
		function  getBrandSub(id){
			if(id != -1){
				var brandSub = $('#brand-sub');
				brandSub.removeAttr('disabled');
				brandSub.children('option').remove();
				for(var i = 0 ; i < brandsJson.length ;i++){
					var pid = brandsJson[i].pid;
					if(pid == id){
						brandSub.append('<option value="'+brandsJson[i].id+'" price="'+brandsJson[i].price+'">'+brandsJson[i].name+'</option>');
					}
				}
			}
		}
		function getBrandPrice(obj){
			var price = $(obj).children('option:selected').attr('price');
			console.log(price);
			if(price == 'a'){
				selectType(1);
			}else if(price == 'b'){
				selectType(2);
			}else if(price == 'c'){
				selectType(3);
			}
		}
		function initBrand(){
			var brand = $('#brand');
			var brandSub = $('#brand-sub');
			for(var i = 0 ; i < brandsJson.length ;i++){
				var pid = brandsJson[i].pid;
				if(pid == 0){
					brand.append('<option value="'+brandsJson[i].id+'">'+brandsJson[i].name+'</option>');
				}
			}
			var defBrandId = brand.children('option:first').val();
			getBrandSub(defBrandId);
			getBrandPrice(brandSub);
		}
		
		function stepNext(step){
			if(step == 1){
				var brand = $('#brand option:selected').text();
				var brandSub = $('#brand-sub option:selected').text();
				$('#cbrand').val(brand+"-"+brandSub);
				$('title').text('用户信息');
				$('.step-1').hide();
				$('.step-2').show();
			}
		}
		initBrand();
	</script>
</body>
</html>